<template>
  <div class="container">
    <div class="pd">
      <div class="left">
        <el-menu default-active="r" class="el-menu-vertical-demo" @select='changeTab'>
          <el-menu-item index="r">
            <el-icon><User /></el-icon>
            <template #title>角色</template>
          </el-menu-item>
          <el-menu-item index="p">
            <el-icon><Key /></el-icon>
            <template #title>权限</template>
          </el-menu-item>
          <el-menu-item index="g">
            <el-icon><Grid /></el-icon>
            <template #title>权限组</template>
          </el-menu-item>
          <el-menu-item index="rp">
            <el-icon><Setting /></el-icon>
            <template #title>角色权限</template>
          </el-menu-item>
          <el-menu-item index="pr">
            <el-icon><Operation /></el-icon> 
            <template #title>权限角色</template>
          </el-menu-item>
          <el-menu-item index="menu">
            <el-icon><Menu /></el-icon> 
            <template #title>菜单</template>
          </el-menu-item>
          <el-menu-item index="rolemenu">
            <el-icon><Operation /></el-icon> 
            <template #title>角色菜单</template>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="right" ref="right">
        <RoleManager v-if="active == 'r'"></RoleManager>
        <PermissionManager v-if="active == 'p'"></PermissionManager>
        <GroupManager v-if="active == 'g'"></GroupManager>
        <RPManager v-if="active == 'rp'"></RPManager>
        <PRManager v-if="active == 'pr'"></PRManager>
        <MenuManager v-if="active == 'menu'"></MenuManager>
        <RoleMenuManager v-if="active == 'rolemenu'"></RoleMenuManager>
      </div>
    </div>

  </div>
</template>

<script>
import { defineComponent } from 'vue'
import MenuManager from './MenuManager'
import PermissionManager from './PermissionManager'
import RoleManager from './RoleManager'
import GroupManager from './GroupManager'
import RPManager from './RPManager'
import PRManager from './PRManager'
import RoleMenuManager from './RoleMenuManager'
import store from "../store"
import { User, Key, Setting, Operation,Grid,Menu } from '@element-plus/icons-vue'

export default defineComponent({
  components: {
    PermissionManager,
    RoleManager,
    GroupManager,
    PRManager,
    RPManager,
    MenuManager,
    RoleMenuManager,
    Menu,
    User,
    Key,
    Setting,
    Operation,
    Grid
  },
  name: "RPIndex",
  data() {
    return {
      active: 'p'
    }
  },
  store,
  methods: {
    changeTab(e) {
      this.active = e
    }
  },
  computed: {

  },
  mounted() {
    this.active = 'r'
    setTimeout(() => {
      store.rightHeight = this.$refs["right"].offsetHeight - 80
    }, 50);
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  overflow: hidden;
}
.container .pd:hover {
  box-shadow: 0 0 20px rgb(0, 0, 0, 0.2);
}
.container .pd {
  display: flex;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 20px rgb(0, 0, 0, 0.1);
}

.container,
* {
  transition: all 0.2s linear;
}
.container .left {
  box-sizing: border-box;
  width: 150px;
  background: #ffffff;
  height: 100%;
  text-align: left;
  box-shadow: 0 0 10px rgb(141, 141, 141, 0.2);
}
.container .left:hover {
  box-shadow: 0 0 10px rgb(141, 141, 141, 0.5);
}
.container .left .item {
  cursor: pointer;
  line-height: 1.2rem;
  padding: 6px 10px;
  text-align: left;
  color: #4a5055;
}
.container .left .item:hover {
  background: #c6cccc;
}
.container .left .actived {
  background: #c6cccc;
}
.container .right {
  padding: 20px 40px;
  box-sizing: border-box;
  flex: 1;
  width: 10px;
}
</style>
